<template>
    <div style="height: 380px;">
        <n-input placeholder="搜索节点" v-model:value="keywords">
            <template #prefix>
                <jb-icon :local="true" :icon="Icons.SEARCH"></jb-icon>
            </template>
        </n-input>
        <n-divider/>
        <div class="node-tool-box" style="height: 350px; overflow: hidden;overflow-y: auto">
            <div class="node-tool-content">
                <div class="node_container">
                    <template v-for="group in filteredNodes" :key="group.groupName">
                        <div v-if="!group.hide"
                             :style="`--bgColor:${group.bgColor};--color:${group.color};--activeColor:${group.activeColor}`">
                            <label v-if="group.list.length > 0">{{ group.groupName }}</label>
                            <div class="node-box">
                                <div class="node" v-for="node in group.list" :key="node.name" :draggable="true"
                                     @dragstart="onDragStart($event, node)" @dblclick="onClick($event,node)">
                                    <jb-icon :local="true" :icon="node.icon" :color="group.activeColor" style="font-size: 20px;"></jb-icon>
                                    <div class="node-content">
                                        <h3>{{ node.name }}</h3>
                                        <p>{{ node.desc }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>


    </div>

</template>
<script setup>
import {
    onMounted,
    ref, watch
} from "vue";
import useDragAndDrop from '../useDragDrop.js'
import {
    NodeDefs
} from "./node-def.js";
import {Icons} from "@/constants/index.js";

const keywords = ref('')
const {
    onDragStart,
    onClick
} = useDragAndDrop()
const nodes = ref(NodeDefs)
// 创建一个过滤后的节点数据
const filteredNodes = ref([...NodeDefs]);


// 监听 keywords 的变化并过滤 nodes
watch(keywords, (newVal) => {
    filteredNodes.value = nodes.value.map(group => {
        const filteredList = group.list.filter(node => {
            // 将节点的 name 和 desc 转换为小写，关键词也转换为小写
            const lowerName = node.name.toLowerCase();
            const lowerDesc = node.desc.toLowerCase();
            const lowerKeyword = newVal.toLowerCase();

            return lowerName.includes(lowerKeyword) || lowerDesc.includes(lowerKeyword);
        });
        return {
            ...group,
            list: filteredList
        };
    });
}, {immediate: true});

</script>
<style scoped>
label {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 16px;
    display: inline-block;
}

.node {
    display: flex;
    padding: 5px;
    align-items: center;
    /**
border: 1px solid var(--color);
*/
    /**
background: var(--bgColor);
*/
    border-radius: 4px;
    cursor: move;
    line-height: 1.3;
    margin-bottom: 8px;
    width: 49%;
}

.node-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.node:hover {
    box-shadow: 0 0 3px 0 rgba(121, 121, 121, 0.11);
    border-color: var(--activeColor);
    background-color: rgba(121, 121, 121, 0.09);
}

.node-content {
    margin-left: 16px;
}

.node-content h3 {
    font-size: 12px;
    font-weight: normal;
}

.node-content p {
    font-size: 10px;
    color: #6b7280;
}


</style>